const borderStyles = [{
  label: 'Dotted',
  value: 'dotted'
},
{
  label: 'Solid',
  value: 'solid'
},
{
  label: 'Double',
  value: 'double'
},
{
  label: 'Dashed',
  value: 'dashed'
}
]

export default {
  field: {
    type: String,
    is: 'ElSelect',
    hidden: true,
    component: {
      size: 'mini',

      options: []
    }
  },
  width: {
    type: Number,
    is: 'ElInputNumber',
    default: 20,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '100%'
      },
      min: 10
    },

    formItem: {
      label: 'Width'
    },
    col: {
      span: 12
    }
  },
  height: {
    type: Number,
    is: 'ElInputNumber',
    default: 20,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '100%'
      },
      min: 10
    },
    formItem: {
      label: 'Height'
    },
    col: {
      span: 12
    }
  },
  x: {
    type: Number,
    is: 'ElInputNumber',
    default: 0,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '100%'
      },
      min: 0
    },
    formItem: {
      label: 'X'
    },
    col: {
      span: 12
    }
  },
  y: {
    type: Number,
    is: 'ElInputNumber',
    default: 0,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '100%'
      },
      min: 0
    },
    formItem: {
      label: 'Y'
    },
    col: {
      span: 12
    }
  },

  borderWidth: {
    type: Number,
    is: 'ElInputNumber',
    default: 1,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '62px'
      },
      max: 10,
      min: 0
    },
    formItem: {
      label: 'Border'
    },
    col: {
      span: 6
    }
  },
  borderStyle: {
    type: String,
    is: 'ElSelect',
    default: 'solid',
    component: {
      size: 'mini',
      style: {
        width: '100px'
      },
      options: borderStyles
    },
    formItem: {
      label: ' '
    },
    col: {
      span: 8
    }
  },
  borderRaduis: {
    type: Number,
    is: 'ElInputNumber',
    default: 2,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '62px'
      }
    },
    formItem: {
      label: ' '
    },
    col: {
      span: 6
    }
  },
  borderColor: {
    type: String,
    default: '#db1f1f',
    is: 'ElColorPicker',
    component: {
      size: 'mini'
    },
    formItem: {
      label: ' '
    },
    col: {
      span: 4
    }
  },

  boxShadowX: {
    type: Number,
    is: 'ElInputNumber',
    default: 0,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '62px'
      },
      max: 10,
      min: 0
    },
    formItem: {
      label: 'Box Shadow',
      labelWidth: '100px'
    },
    col: {
      span: 6
    }
  },
  boxShadowY: {
    type: Number,
    is: 'ElInputNumber',
    default: 0,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '62px'
      },
      max: 10,
      min: 0
    },
    formItem: {
      label: ' '

    },
    col: {
      span: 6
    }
  },
  boxShadowBlur: {
    type: Number,
    is: 'ElInputNumber',
    default: 0,
    component: {
      size: 'mini',
      controlsPosition: 'right',
      style: {
        width: '62px'
      },
      max: 10,
      min: 0
    },
    formItem: {
      label: ' '
    },
    col: {
      span: 6
    }
  },
  boxShadowColor: {
    type: String,
    default: '#db1f1f',
    is: 'ElColorPicker',
    component: {
      size: 'mini'
    },
    formItem: {
      label: ' '
    },
    col: {
      span: 6
    }
  },
  content: {
    type: String,
    is: 'ElInput',
    component: {
      size: 'mini'
    },
    formItem: {
      label: 'Tooltip'
    },
    col: {
      span: 24
    }
  },
  bg: {
    type: String,
    default: '#db1f1f',
    is: 'ElColorPicker',
    component: {
      size: 'mini'
    },
    formItem: {
      label: 'Background Color'
    },
    col: {
      span: 24
    }
  },
  backgroundImage: {
    type: String,
    is: 'ZClipUpload',
    component: {
      size: 'mini'
    },
    formItem: {
      label: 'Background Image'
    },
    col: {
      span: 24
    }
  }

}
